<!-- Includes 6 graph database management panels -->
<template>
  <!--添加实体，修改实体-->
  <div
    class="div-management-wrapper"
    v-if="itemIndex === 0 || itemIndex === 1"
    :style="{ width: managementWrapperWidth }"
  >
    <single-entity v-model="currentEntity" />
    <button
      class="btn-db-operation btn btn-primary"
      v-if="itemIndex === 0"
      @click="addEntity"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isEntityLoadingShow"
      />
      添加实体
    </button>

    <button
      class="btn-db-operation btn btn-primary"
      v-if="itemIndex === 1"
      @click="isEntityQueried ? modifyEntity() : queryEntity()"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isEntityLoadingShow"
      />
      {{ isEntityQueried ? "确认修改" : "查询实体" }}
    </button>
  </div>

  <!--删除实体-->
  <div
    class="div-management-wrapper"
    v-if="itemIndex === 2"
    :style="{ width: managementWrapperWidth }"
  >
    <div class="input-group d-flex">
      <span class="input-group-text">实体名称</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入要删除实体的名称"
        v-model="entityToRemoveName"
      />
    </div>

    <div class="input-group d-flex mb-3">
      <span class="input-group-text">实体类型</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入要删除实体的类型"
        v-model="entityToRemoveType"
      />
    </div>

    <button class="btn-db-operation btn btn-primary" @click="removeEntity">
      <span
        class="spinner-border spinner-border-sm"
        v-show="isEntityLoadingShow"
      />
      删除实体
    </button>
  </div>

  <!--添加，修改，删除关系-->
  <div
    class="div-management-wrapper"
    v-if="itemIndex === 3 || itemIndex === 4 || itemIndex === 5"
    :style="{ width: managementWrapperWidth }"
  >
    <div class="input-group d-flex">
      <span class="input-group-text">起点实体</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入关系起点实体的名称"
        v-model="relationFrom"
      />
    </div>

    <div class="input-group d-flex mb-3">
      <span class="input-group-text">起点类型</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入关系起点实体的类型"
        v-model="relationFromType"
      />
    </div>

    <div class="input-group d-flex">
      <span class="input-group-text">终点实体</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入关系终点实体的名称"
        v-model="relationTo"
      />
    </div>

    <div class="input-group d-flex mb-3">
      <span class="input-group-text">终点类型</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入关系终点实体的类型"
        v-model="relationToType"
      />
    </div>

    <div class="input-group d-flex mb-3">
      <span class="input-group-text">关系标签</span>
      <input
        type="text"
        class="form-control"
        :placeholder="itemIndex === 4 ? '输入新的关系标签' : '输入关系标签'"
        v-model="relationLabel"
      />
    </div>

    <button
      class="btn-db-operation btn btn-primary"
      @click="addRelation"
      v-show="itemIndex === 3"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isRelationLoadingShow"
      />
      添加关系
    </button>

    <button
      class="btn-db-operation btn btn-primary"
      @click="modifyRelation"
      v-show="itemIndex === 4"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isRelationLoadingShow"
      />
      修改关系
    </button>

    <button
      class="btn-db-operation btn btn-primary"
      @click="removeRelation"
      v-show="itemIndex === 5"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isRelationLoadingShow"
      />
      删除关系
    </button>
  </div>

  <!--导出数据-->
  <div
    class="div-management-wrapper"
    v-if="itemIndex === 6"
    :style="{ width: managementWrapperWidth }"
  >
    <button class="btn-download btn btn-primary" @click="downloadTxtCsv('txt')">
      <i class="i-download-icon fa-solid fa-file-lines"></i>
      下载TXT
    </button>

    <button class="btn-download btn btn-primary" @click="downloadTxtCsv('csv')">
      <i class="i-download-icon fa-solid fa-file-csv"></i>
      下载CSV
    </button>
  </div>

  <!--导入数据-->
  <div
    class="div-management-wrapper-import"
    v-if="itemIndex === 7"
    :style="{ width: managementWrapperWidth }"
  >
    <div class="div-triplet-editor-wrapper">
      <triplet-editor
        class="triplet-editor"
        v-model="tripletText"
        v-model:error-line-numbers="tripletErrorLineNumbers"
      />
    </div>

    <button
      class="btn btn-success mt-3"
      style="height: 50px"
      @click="onSelectFileClick"
    >
      <input
        id="in-import-file"
        style="display: none"
        type="file"
        @change="onImportFileChange"
      />
      选择文件
    </button>

    <button
      class="btn btn-primary mt-3 mx-3"
      style="height: 50px"
      @click="uploadTriplets"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isUploadLoadingShow"
      />
      导入数据
    </button>

    <button
      class="btn btn-outline-primary mt-3"
      style="height: 50px"
      @click="onDirectUploadFileClick"
    >
      <span
        class="spinner-border spinner-border-sm"
        v-show="isDirectUploadLoadingShow"
      />
      <!-- 如果把此input紧邻上一个隐藏input放置，
          则调用其click()方法时会接连调用上一个input的click()方法 -->
      <input
        id="in-direct-upload-file"
        style="display: none"
        type="file"
        @change="onDirectUploadFileChange"
      />
      直接导入文件
    </button>
  </div>

  <!--批量操作-->
  <div
    class="div-management-wrapper"
    v-if="itemIndex === 8"
    :style="{ width: managementWrapperWidth }"
  >
    <div class="d-flex flex-column align-items-center">
      <table class="table-batch-mode table table-bordered text-center">
        <thead>
          <tr>
            <th scope="col" colspan="3">
              <b class="m-3">选择操作类型</b>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="form-check">
                <input
                  id="in-batch-mode-add-entity"
                  class="form-check-input"
                  type="radio"
                  value="ADD_ENTITY"
                  v-model="batchMode"
                />
                <label for="in-batch-mode-add-entity">批量添加实体</label>
              </div>
            </td>
            <td>
              <div class="form-check">
                <input
                  id="in-batch-mode-modify-entity"
                  class="form-check-input"
                  type="radio"
                  value="MODIFY_ENTITY"
                  v-model="batchMode"
                />
                <label for="in-batch-mode-modify-entity">批量修改实体</label>
              </div>
            </td>
            <td>
              <div class="form-check">
                <input
                  id="in-batch-mode-remove-entity"
                  class="form-check-input"
                  type="radio"
                  value="REMOVE_ENTITY"
                  v-model="batchMode"
                />
                <label for="in-batch-mode-remove-entity">批量删除实体</label>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-check">
                <input
                  id="in-batch-mode-add-relation"
                  class="form-check-input"
                  type="radio"
                  value="ADD_RELATION"
                  v-model="batchMode"
                />
                <label for="in-batch-mode-add-relation">批量添加关系</label>
              </div>
            </td>
            <td>
              <div class="form-check">
                <input
                  id="in-batch-mode-modify-relation"
                  class="form-check-input"
                  type="radio"
                  value="MODIFY_RELATION"
                  v-model="batchMode"
                />
                <label for="in-batch-mode-modify-relation">批量修改关系</label>
              </div>
            </td>
            <td>
              <div class="form-check">
                <input
                  id="in-batch-mode-remove-relation"
                  class="form-check-input"
                  type="radio"
                  value="REMOVE_RELATION"
                  v-model="batchMode"
                />
                <label for="in-batch-mode-remove-relation">批量删除关系</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <button
        class="btn btn-primary mt-3"
        style="height: 50px"
        @click="onSelectBatchFileClick"
      >
        <span
          class="spinner-border spinner-border-sm"
          v-show="isBatchUploadLoadingShow"
        />
        <input
          id="in-batch-file"
          style="display: none"
          type="file"
          @change="onBatchFileChange"
        />
        上传文件
      </button>
    </div>
  </div>
</template>

<!--使用Script Setup简化对象暴露-->
<script setup>
import { watch } from "vue";

import SingleEntity from "./single-entity.vue";
import TripletEditor from "./triplet-editor.vue";

import useEntityOperations from "@/composables/management/useEntityOperations";
import useRelationOperations from "@/composables/management/useRelationOperations";
import useExportData from "@/composables/management/useExportData";
import useImportData from "@/composables/management/useImportData";
import useBatchOperations from "@/composables/management/useBatchOperations";

import { isMobileBrowser } from "@/modules/Utilities";
const managementWrapperWidth = isMobileBrowser() ? "90%" : "65%";

const managementEvents = {
  errorEvent: "error",
  successEvent: "success",
};

const emit = defineEmits(["error", "success"]);
const props = defineProps({
  // 0: 添加实体
  // 1: 修改实体
  // 2: 删除实体
  // 3: 添加关系
  // 4: 修改关系
  // 5: 删除关系
  // 6: 导出数据
  // 7: 导入数据
  itemIndex: {
    type: Number,
    required: true,
  },
});

const {
  currentEntity,
  clearCurrentEntity,

  isEntityLoadingShow,

  addEntity,

  isEntityQueried,
  entityOrigName,
  queryEntity,
  modifyEntity,

  entityToRemoveName,
  entityToRemoveType,
  removeEntity,
} = useEntityOperations({ emit }, managementEvents);

// 关系操作相关
const {
  relationFrom,
  relationFromType,
  relationTo,
  relationToType,
  relationLabel,

  isRelationLoadingShow,

  addRelation,
  modifyRelation,
  removeRelation,
} = useRelationOperations({ emit }, managementEvents);

// 导出数据功能
const { downloadTxtCsv } = useExportData();

// 导入数据功能
const {
  tripletText,
  onSelectFileClick,
  onDirectUploadFileClick,
  onImportFileChange,
  onDirectUploadFileChange,
  uploadTriplets,
  tripletErrorLineNumbers,
  isUploadLoadingShow,
  isDirectUploadLoadingShow,
} = useImportData({ emit }, managementEvents);

const {
  batchMode,
  isBatchUploadLoadingShow,
  onSelectBatchFileClick,
  onBatchFileChange,
} = useBatchOperations({ emit }, managementEvents);

// 监听功能编号变更
watch(
  () => props.itemIndex,
  (newVal) => {
    isRelationLoadingShow.value = false;
    isEntityLoadingShow.value = false;

    switch (newVal) {
      case 0:
        clearCurrentEntity();
        break;

      case 1:
        clearCurrentEntity();
        entityOrigName.value = "";
        isEntityQueried.value = false;
        break;

      case 2:
        entityToRemoveName.value = "";
        entityToRemoveType.value = "";
        break;

      case 3:
      case 4:
      case 5:
        relationFrom.value = "";
        relationFromType.value = "";
        relationTo.value = "";
        relationToType.value = "";
        relationLabel.value = "";
        break;
    }
  }
);
</script>

<style lang="scss" scoped>
.div-management-wrapper {
  text-align: center;
  padding: 5px;

  height: fit-content;
  max-height: 90%;
  overflow: auto;
}

.div-management-wrapper-import {
  @extend .div-management-wrapper;

  height: 85%;
}

.div-triplet-editor-wrapper {
  padding: 2px 0;
  height: fit-content;
  max-height: calc(100% - 70px);
  overflow: auto;
}

.btn-db-operation {
  width: 35%;
}

.btn-download {
  width: 30%;
  height: 150px;
  font-size: 20px;
  border-radius: 10px;
  margin: 20px 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.15s, transform 350ms;

  &:hover {
    transform: translateY(-5px);
  }
}

.i-download-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 20px;
}

.triplet-editor {
  width: m#{i}n(600px, 80%);
}

.table-batch-mode{
  td{
    > div{
      > input{
        float: none;
        margin-right: 8px;
      }
    }
  }
}
</style>